<template>
  <mu-container class="container">

    <mu-form ref="form" :model="validateForm" class="mu-form">
      <mu-form-item>
        <div>单位名称：{{firstForm.bidder}}</div>
      </mu-form-item>
      <mu-button flat color="primary" class="form_btn" @click="goPrve">修改</mu-button>
      <mu-form-item label="保函类型" prop="guaranteetype" :rules="typenameRules">
        <!-- <mu-select v-model="validateForm.guaranteetype" full-width >
          <mu-option label="银行保函" value="银行保函"></mu-option>
          <mu-option label="公司保函" value="公司保函"></mu-option>
        </mu-select> -->
        <van-radio-group v-model="validateForm.guaranteetype" @change="selectType" class="guaranteetype">
          <van-radio name="银行保函">银行保函</van-radio>
          <van-radio name="公司保函">公司保函</van-radio>
        </van-radio-group>
      </mu-form-item>
      <mu-form-item label="推荐码">
        <mu-text-field placeholder="请输入邀请人编码（非必填）" v-model="validateForm.invitecode">
        </mu-text-field>
      </mu-form-item>
      <mu-form-item label="开标时间" prop="kbtime" :rules="usernameRules">
        <mu-date-input placeholder="必填" v-model="validateForm.kbtime" container="bottomSheet" no-display label-float
          full-width @change="setTIme">
        </mu-date-input>
      </mu-form-item>
      <div class="form_flex">
        <mu-form-item label="投标有效期" prop="indatenum" :rules="passwordRules" style="width:34%;">
          <mu-select v-model="validateForm.indatenum" tags @change="setTIme" type="number">
            <mu-option v-for="(day,index) in days" :key="index" :label="day" :value="day">
              <!-- <mu-option v-for="language,index in languages" :key="language" :label="language" :value="language"></mu-option> -->
            </mu-option>
          </mu-select>
        </mu-form-item>
        <mu-form-item class="form_indate" label="保函有效期" prop="earnest">
          <span style="line-height:3">{{validateForm.enddate}}</span>
        </mu-form-item>
      </div>
      <div class="form_flex">
        <mu-form-item label="保证金金额" prop="earnest" :rules="earRules">
          <mu-text-field v-model="validateForm.earnest" prop="earnest" @blur="changeEar"></mu-text-field>
        </mu-form-item>
        <div class="form_unit">万元</div>
        <mu-form-item label="办理费用" prop="earnest">
          <span style="font-size:16px;height:40px;line-height:45px;text-align:right;"><span style="color:rgb(8,136,245)"
              ref="price"></span> 元 </span>
        </mu-form-item>
      </div>

      <mu-form-item label="项目及标段名称" prop="bidsection" :rules="bedsecRules">
        <mu-text-field placeholder="请按招标文件填写，示例：AAAAAA项目（AAAA标段）" v-model="validateForm.bidsection" prop="bidsection">
        </mu-text-field>
      </mu-form-item>

      <mu-form-item style="text-align:center;" v-if="!rowguid">
        <mu-button color="primary" class="form_submit" @click="goPrve" style="width:40%">上一步</mu-button>
        <mu-button color="primary" @click="submit" style="width:40%;margin-top:0px;box-shadow: none;"
          class="mu-buttons">下一步</mu-button>
      </mu-form-item>
    </mu-form>
  </mu-container>
</template>
<script>
  export default {
    props: ['rowguid'],
    data() {
      return {
        usernameRules: [{
          validate: (val) => !!val,
          message: '必须填写开标时间'
        }],
        passwordRules: [{
          validate: (val) => !!val,
          message: '必须填投标有效期'
        }, ],
        earRules: [{
          validate: (val) => !!val,
          message: '必须填保证金金额'
        }, ],
        bedsecRules: [{
          validate: (val) => !!val,
          message: '必须填标段名称'
        }, ],
        typenameRules: [{
          validate: (val) => !!val,
          message: '必须选择保函类型'
        }, ],
        validateForm: {
          earnest: '0',
          amount: '',
          kbtime: '',
          bidsection: '',
          guaranteetype: '银行保函'
        },
        days: ['30', '60', '90', '120'],
        firstForm: {},
        vendorList: []
      }
    },
    methods: {
      selectType(e) {
        this.validateForm.guaranteetype = e;
        this.changeEar();
      },
      saveForm() {
        // this.$store.dispatch('second/asyncSetForm', this.validateForm)
      },
      submit() {
        this.$refs.form.validate().then((result) => {
          if (result) {
            this.toPath('/applythird')
            this.validateForm.kbtime = this.timestampToTime(this.validateForm.kbtime).split('T')[0];
            this.$store.dispatch('second/asyncSetForm', this.validateForm)
          }

        });
      },
      setTIme: function (e) {
        if (this.validateForm.kbtime && this.validateForm.indatenum) {
          let date = new Date(this.validateForm.kbtime).getTime();
          this.validateForm.enddate = this.timestampToTime(date + this.validateForm.indatenum * 86400000);
          this.validitytime = this.timestampToTime(date + this.validateForm.indatenum * 86400000);
        }
      },
      timestampToTime: function (timestamp) {
        let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        let Y = date.getFullYear() + '-';
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) +
          '-';
        let D = date.getDate();
        if (D <= 9) {
          D = '0' + D
        }
        return Y + M + D;
      },
      goPrve() {
        this.toPath('/applyfirst')
      },
      changeEar() {
        let that = this
        if (this.validateForm.earnest) {
          let query = {
            vendorcode: this.vendorList.vendorid,
            bankcode: this.vendorList.banklist[0].bankid,
            earnest: this.validateForm.earnest,
            guaranteetype: this.validateForm.guaranteetype
          }
          that.$api.computeprice(query).then(function (res) {
            that.validateForm.amount = res.price
            that.$refs.price.innerText = res.price;
          })
        }
      }
    },
    mounted() {
      let _this = this;
      let query = {
        guaranteetype: _this.validateForm.guaranteetype,
        earnest: _this.validateForm.earnest,
      }

      this.$api.vendordeal(query).then(function (data) {
        _this.vendorList = data;
      })

      let validateForm = this.$store.state.second.form;
      this.firstForm = this.$store.state.first.form;
      if (validateForm) {
        this.validateForm = validateForm;
      }



      if (this.rowguid) {
        this.$api.orderdetail({
          rowguid: this.rowguid
        }).then(function (res) {
          _this.validateForm.invitecode = res.orderinfo.invitecode;
          _this.validateForm.kbtime = res.orderinfo.kbtime;
          _this.validateForm.indatenum = res.orderinfo.indatenum;
          _this.validateForm.enddate = res.orderinfo.enddate;
          _this.validateForm.earnest = res.orderinfo.earnest;
          _this.validateForm.bidsection = res.orderinfo.bidsection;
          _this.validateForm.amount = res.orderinfo.amount;
          _this.validateForm.guaranteetype = res.orderinfo.guaranteetype;
          _this.$refs.price.innerText = res.orderinfo.amount ? res.orderinfo.amount : '';
        })
      } else {
        this.$api.orderdetail().then(function (res) {
          _this.validateForm.invitecode = res.orderinfo.invitecode;
          _this.validateForm.kbtime = res.orderinfo.kbtime;
          _this.validateForm.indatenum = res.orderinfo.indatenum;
          _this.validateForm.enddate = res.orderinfo.enddate;
          _this.validateForm.earnest = res.orderinfo.earnest;
          _this.validateForm.bidsection = res.orderinfo.bidsection;
          _this.validateForm.amount = res.orderinfo.amount;
          _this.validateForm.guaranteetype = res.orderinfo.guaranteetype;
          _this.$refs.price.innerText = res.orderinfo.amount ? res.orderinfo.amount : '';
        })
      }
    },
    watch: {
      'validateForm.earnest': function (n, o) {
        let that = this;
        if (o != n) {
          if (n > 80) {
            that.common.showAlert('保证金金额不能超过80（不包括）万，请联系客服进行线下办理。', function () {
              that.validateForm.earnest = '';
            }, 'warning');
          } else {
            this.changeEar()
          }
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .container {
    padding: 16px;
  }

  .mu-text-field-input {
    border: none;
    background: #ffffff;
    height: 40px;
    border-radius: 5px;
    font-size: 12px;
  }

  .mu-form-item {
    margin-bottom: 4px;
    padding-bottom: 12px;

    .mu-buttons {
      margin: 0 auto;
      width: 100%;
      background-color: #f18241;
      margin-top: 20px;
    }

    .form_submit {
      color: #f18241;
      background-color: rgb(250, 250, 250);
      border: 1px solid #f18241;
      box-shadow: none;
    }
  }

  .mu-primary-text-color,
  .selected,
  .now {
    color: #f18241;
  }

  .form_flex {
    display: flex;
    justify-content: flex-start;
  }

  .form_indate {
    line-height: 90px;
    margin-left: 30px;
    color: #666666
  }

  .form_unit {
    height: 40px;
    margin-top: 38px;
    margin-left: 10px;
    margin-right: 10px;
    width: 40px;
  }

  .form_btn {
    position: absolute;
    right: 0;
    top: 15px;
  }

  .van-radio-group {
    display: flex;

    .van-radio {
      margin-right: 50px;
    }
  }

  .van-radio__icon--checked .van-icon{
    color: #fff;
    border-color: #f18241 !important;
    background-color: #f18241 !important;
  }

  .guaranteetype {
    background: #ffffff;
    padding: 10px;
    width: 100%;
  }
</style>